import type { VbenFormProps, VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { queryPage } from './api';
import { ref } from 'vue';
import { z } from '#/adapter/form';
import { useStoreStore } from '#/store';

import { usePermissionsStore } from '#/store';

// 操作id
export const idKey = ref('bookId');
export const handleId = ref('');
export const storeId = ref(useStoreStore().getStoreId());

// 表格表单数据
export const formOptions: VbenFormProps = {
  schema: [
    {
      component: 'Input',
      defaultValue: '',
      fieldName: 'bookName',
      label: '书名',
    },
    {
      component: 'Input',
      defaultValue: '',
      fieldName: 'author',
      label: '作者',
    },
    {
      component: 'Input',
      defaultValue: '',
      fieldName: 'publisher',
      label: '出版社',
    },
    {
      fieldName: 'sendStatus',
      label: '状态',
      component: 'Select',
      componentProps: {
        options: [
          { label: '已显示', value: 1 },
          { label: '已隐藏', value: 0 },
        ],
      },
    },
  ],
  wrapperClass: 'grid-cols-5',
};

// 表格数据
export const gridOptions: VxeTableGridOptions = {
  rowConfig: {
    height: 100,
  },
  columns: [
    { title: '序号', type: 'seq', width: 80 },
    {
      title: '封面图',
      field: 'thumbnail',
      align: 'center',
      cellRender: {
        name: 'CellImageViewer',
        props: { width: '50px', height: '80px' },
      },
      width: 120,
    },
    {
      title: '书名',
      slots: { default: 'bookName' },
      field: 'bookName',
      width: 180,
    },
    { title: '作者', field: 'author', width: 160 },
    { title: '简介', field: 'introduction', align: 'left', width: 300 },
    { title: '出版社', field: 'publisher', width: 160 },
    { title: '出版日期', field: 'publishTime', width: 160 },
    {
      title: '状态',
      field: 'state',
      cellRender: {
        name: 'CellDict',
        props: { dictType: 'PUBLISH_STATUS' },
      },
      width: 120,
    },
    {
      title: '分类',
      slots: { default: 'classes' },
      field: 'classesName',
      width: 200,
    },
    {
      title: '标签',
      slots: { default: 'tags' },
      field: 'tagsName',
      width: 200,
    },
    { title: '位置', field: 'location', width: 160 },
    { title: '备注', field: 'mark', width: 160 },
    { title: '创建时间', field: 'createTime', align: 'left', width: 160 },
    {
      fixed: 'right',
      slots: { default: 'action' },
      title: '操作',
      width: usePermissionsStore().IsAdmin ? 120 : 160,
    },
  ],
  minHeight: '100%',
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
        let params = {
          page: page.currentPage,
          limit: page.pageSize,
          ...formValues,
        };
        if (usePermissionsStore().IsOrdinary) params.storeId = storeId.value;
        return await queryPage(params);
      },
    },
    response: {
      result: 'data.records',
      total: 'data.total',
      list: 'data.records',
    },
  },
  pagerConfig: {
    enabled: true,
    pageSize: 5,
  },
  toolbarConfig: {
    custom: true,
    export: false,
    import: false,
    refresh: true,
    zoom: true,
  },
};

export const classList = ref<any[]>([]);
export const tagList = ref<any[]>([]);

// 编辑弹窗表单配置
export const drawerFormSchema: VbenFormSchema[] = [
  {
    component: 'Input',
    defaultValue: '',
    fieldName: idKey.value,
    label: '图书id',
    dependencies: {
      show() {
        return false;
      },
      triggerFields: [''],
    },
  },
  {
    component: 'Input',
    defaultValue: 1,
    fieldName: 'borrowType',
    label: '格式',
    dependencies: {
      show() {
        return false;
      },
      triggerFields: [''],
    },
  },
  {
    component: 'Input',
    defaultValue: storeId.value,
    fieldName: 'storeId',
    label: '书馆id',
    dependencies: {
      show() {
        return false;
      },
      triggerFields: [''],
    },
  },
  {
    component: 'ImageUpload',
    fieldName: 'thumbnail',
    help: '请上传图书封面',
    label: '图书封面',
    rules: z.string().min(1, { message: '请上传图书封面' }),
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入书名',
      allowClear: true,
    },
    fieldName: 'bookName',
    label: ' 书名',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入作者',
      allowClear: true,
    },
    fieldName: 'author',
    label: '作者',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入国际标准书号',
      allowClear: true,
    },
    fieldName: 'bookISBN',
    label: '国际标准书号',
    rules: 'required',
  },
  // {
  //   component: 'Select',
  //   componentProps: {
  //     allowClear: true,
  //     filterOption: true,
  //     class: 'w-2/5',
  //     mode: 'tags',
  //     maxTagCount: 3,
  //     options: computed(() => {
  //       return classList.value.map((item) => {
  //         return {
  //           label: item.className,
  //           value: item.classId,
  //         };
  //       });
  //     }),
  //     placeholder: '请选择图书分类',
  //     showSearch: true,
  //   },
  //   fieldName: 'classId',
  //   label: '分类',
  //   rules: 'required',
  // },
  // {
  //   component: 'Select',
  //   componentProps: {
  //     allowClear: true,
  //     filterOption: true,
  //     class: 'w-2/5',
  //     mode: 'tags',
  //     options: computed(() => {
  //       return tagList.value.map((item) => {
  //         return {
  //           label: item.tagName,
  //           value: item.tagId,
  //         };
  //       });
  //     }),
  //     placeholder: '请选择图书标签',
  //     showSearch: true,
  //   },
  //   fieldName: 'tagId',
  //   label: '标签',
  //   rules: 'required',
  // },
  {
    component: 'Input',
    fieldName: 'classId',
    label: '分类',
    rules: 'required',
  },
  {
    component: 'Input',
    fieldName: 'tagId',
    label: '标签',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入图书编号',
      allowClear: true,
    },
    fieldName: 'bookNumber',
    label: '图书编号',
    rules: 'required',
  },
  {
    component: 'Textarea',
    componentProps: {
      placeholder: '请输入图书简介',
      allowClear: true,
    },
    fieldName: 'introduction',
    label: '图书简介',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入图书位置',
      allowClear: true,
    },
    fieldName: 'location',
    label: '图书位置',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入页数',
      allowClear: true,
      class: 'w-1/3',
    },
    fieldName: 'pages',
    label: '页数',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入出版社',
      allowClear: true,
    },
    fieldName: 'publisher',
    label: '出版社',
    rules: 'required',
  },
  {
    component: 'DatePicker',
    componentProps: {
      placeholder: '请选择出版日期',
      allowClear: true,
      class: 'w-1/3',
      valueFormat: 'YYYY-MM-DD',
      format: 'YYYY-MM-DD',
    },
    fieldName: 'publishTime',
    label: '出版日期',
    rules: 'required',
  },
  {
    component: 'InputNumber',
    componentProps: {
      placeholder: '请输入图书价格',
      allowClear: true,
      class: 'w-1/3',
    },
    fieldName: 'price',
    label: '图书价格',
    rules: 'required',
  },
  {
    component: 'InputNumber',
    componentProps: {
      placeholder: '请输入借阅租金',
      allowClear: true,
      class: 'w-1/3',
    },
    fieldName: 'rent',
    label: '借阅租金',
    rules: 'required',
  },
  {
    component: 'Input',
    componentProps: {
      placeholder: '请输入备注',
      allowClear: true,
    },
    fieldName: 'mark',
    label: '备注',
    rules: 'required',
  },
  {
    component: 'RadioGroup',
    componentProps: {
      options: [
        {
          label: '上架',
          value: 1,
        },
        {
          label: '下架',
          value: 0,
        },
      ],
    },
    fieldName: 'state',
    defaultValue: 1,
    label: '发布状态',
    rules: 'required',
  },
  {
    component: 'InputNumber',
    fieldName: 'seq',
    componentProps: {},
    label: '排序值',
    rules: 'required',
    defaultValue: 1,
  },
];
